<template>
  <div>
    <el-page-header content="添加用户" icon="" title="用户管理" />

    <el-card style="margin-top: 20px">
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="userFormRules"
        label-width="120px"
        class="add-user-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password" type="password" show-password />
        </el-form-item>

        <el-form-item label="角色" prop="role">
          <el-select
            v-model="userForm.role"
            class="m-2"
            placeholder="选择角色"
            style="width: 100%"
          >
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <el-select
            v-model="userForm.gender"
            class="m-2"
            placeholder="选择性别"
            style="width: 100%"
          >
            <el-option
              v-for="item in genderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="个人简介" prop="introduction">
          <el-input
            v-model="userForm.introduction"
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 6 }"
            :resize="'none'"
            maxlength="300"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="头像" prop="avatar">
          <Upload :avatar="userForm.avatar" @imgChange="handleChange" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm()">添加用户</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import Upload from "@/components/upload/Upload.vue";
import upload from "@/utils/upload";

const userFormRef = ref();
const userForm = reactive({
  username: "username2",
  password: "123456",
  role: 1, //1 是管理员 ,2编辑
  gender: 0,
  introduction: "username2简介",
  avatar: "",
  // avatar: "/images/defaultUserImg.png",
  file: null,
});

// 角色选择
const roleOptions = [
  { label: "管理员", value: 1 },
  { label: "编辑", value: 2 },
];

// 性别选择
const genderOptions = [
  { label: "保密", value: 0 },
  { label: "男", value: 1 },
  { label: "女", value: 2 },
];

// 表单校验
const userFormRules = reactive({
  username: [{ required: true, message: "请输入名字", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  role: [{ required: true, message: "请选择权限", trigger: "blur" }],
  gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
  introduction: [{ required: true, message: "请输入介绍", trigger: "blur" }],
  avatar: [{ required: false, message: "请上传头像", trigger: "blur" }],
});

// 每次选择完图片之后的回调
const handleChange = (file) => {
  userForm.avatar = URL.createObjectURL(file);
  userForm.file = file;
};

const router = useRouter();
// 更新提交
const submitForm = () => {
  userFormRef.value.validate(async (valid) => {
    if (valid) {
      await upload("/adminapi/user/add", userForm).then((res) => {
        if (res.ActionType == "OK") {
          router.push(`/user-manage/userlist`);
        }
        if (res.ActionType === "ERROR") {
          ElMessage.error(res.message);
        }
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.el-form {
  margin-top: 20px;
}
</style>